<template>
  <div id="app">
    <!-- 头部区域 -->
    <Navs></Navs>
    <!-- 主体区域 -->
    <div class="main">
      <!-- 侧边栏 -->
      <div class="tab">
        <Taba></Taba>
      </div>
      <!-- 主体 -->
      <div class="box">
        <router-view  ></router-view>
      </div>
      <footer class="footer">
        <!-- autoplay 自动播放 -->
				<!-- 这里通过store.state.url  就可获取到store里面的url了。不管在哪个文件里，都可直接获取。就是这。不太好理解。 -->
        <audio :src='$store.state.musicUrl' autoplay controls class="bottom"></audio>
				<!-- 播放器 -->
      </footer>
    </div>
  </div>
</template>

<script>
import Taba from "./components/Tab";
import Navs from "./components/Nav";
export default {
  data() {
    return {
      musicUrl:''
    };
  },
  components: {
    Taba,
    Navs,
  },
	mounted(){
		// handlePaginChange = () => {
    //   scrollTop(mainRef)
    // }
	},
	methods:{
	 
	}
};
</script>
<style scoped>
.main {
  display: flex;
}
.box {
  padding-left: 10px;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 158px;
  padding-left: 10px;
  width: 1200px;
  z-index: 100000;
  border: 0 #fff solid;
}
</style>
<style>
* {
  padding: 0;
  margin: 0;
}
</style>
